<template>
  <div class="common-layout">
    <el-container>
      <el-header height="80px" style="background-color: white;border-bottom: 2px solid green">
        <div style="width: 1200px;margin: 0 auto;">
          <img src="/imgs/XiangJuLogo.jpg" style="width: 150px;height: 100px;position: relative;right: 600px">
        </div>
      </el-header>
      <el-main>
        <div id="main-div">
          <el-card style="width: 545px;height: 432px;margin: 60px auto">
            <h1>用户登录</h1>
            <el-form label-width="80px" style="margin-top: 60px;width: 430px">
              <el-form-item>
                <el-input type="text" placeholder="请输入用户名" :prefix-icon="User" v-model="user.username"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input type="password" placeholder="请输入密码" :prefix-icon="Lock" v-model="user.password"></el-input>
              </el-form-item>
              <el-radio-group v-model="radio" class="ml-4">
                <el-radio label="1" size="large">用户登录</el-radio>
                <el-radio label="2" size="large">管理员登录</el-radio>
              </el-radio-group>
            </el-form>
            <el-button type="success" round @click="login()">登录</el-button>
          </el-card>
        </div>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import qs from "qs";
import axios from "axios";
import router from "@/router";
const radio = ref('1');
const user =ref({username:"",password:""});
const login =()=>{
  let data =qs.stringify(user.value);
  axios.post('http://localhost:8080/v1/users/login',data)
  .then((respsonse)=>{
    if (respsonse.data.code==1){
      location.href="/";
      localStorage.user = JSON.stringify(respsonse.data.data);
    }else {
      alert(respsonse.data.msg);
    }
  })
}

</script>
<style scoped>
#main-div {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  height: 706px;
  background-size: cover; /*设置背景图片为封面*/
  /*设置背景图片居中*/
  background: url('/public/imgs/bg.jpg') no-repeat center;
}
</style>